<template>
  <div class="home-main">
    <div class="logo-wrap">
      <img src="@/assets/images/logo.png" class="logo-img" alt="">
      <img src="@/assets/images/title-logo.png" class="title-logo-img" alt="">
      <img src="@/assets/images/sub-title-logo.png" class="sub-title-logo-img" alt="">
    </div>
    <section class="content-wrap">
      <FuncHeader label="去体验" sub-label="当前仅支持电脑端使用" />
      <div class="href-wrap">
        <span class="href-text">https://threeminspaper.com/</span>
        <div class="copy-wrap" @click="copyText('https://threeminspaper.com/')">
          <span>点击复制</span>
        </div>
        <img src="@/assets/images/point.png" class="point-img" alt="">
      </div>

      <div class="function-wrap">
        <FuncHeader label="功能点" sub-label="新功能正在开发中…" />
        <div class="func-box">
          <div v-for="(item, index) of funcItems" :key="index" class="func-item">
            <div class="label">
              <span>{{ item.label }}</span>
              <div v-if="item.positon" class="text-bg" :class="item.position" />
            </div>
            <p class="intro">{{ item.intro }}</p>
            <img :src="item.icon" alt="">
          </div>
        </div>
      </div>

      <div class="feedback-wrap">
        <FuncHeader label="用户反馈" sub-label="好评如潮…" />
        <div class="feedback-img" />
      </div>

      <div class="barcode-wrap">
        <img src="@/assets/images/barcode.png" alt="" srcset="">
        <p>长按扫码添加公众号</p>
      </div>

    </section>
  </div>
</template>

<script setup>
import FuncHeader from '@/components/common/FuncHeader.vue'
import { copyText } from '@/utils/copy-to'

const funcItems = [{
  label: '论文选题',
  intro: '根据选题方向 智能匹配选题',
  icon: require('@/assets/images/icon-01.png'),
  position: 'right'
}, {
  label: '论文阅读',
  intro: 'AI辅助阅读 提升阅读效率',
  icon: require('@/assets/images/icon-02.png'),
  position: 'right'
}, {
  label: '论文写作',
  intro: '一键选择模板 快速完成写作',
  icon: require('@/assets/images/icon-03.png'),
  position: 'right'
}, {
  label: '学术翻译',
  intro: '学术领域专业翻译工具',
  icon: require('@/assets/images/icon-04.png'),
  position: 'right'
}, {
  label: '论文润色',
  intro: '润色论文内容 提供论文品质',
  icon: require('@/assets/images/icon-05.png'),
  position: 'right'
}, {
  label: '论文投稿',
  intro: '智能匹配期刊 提升投稿成功率',
  icon: require('@/assets/images/icon-06.png'),
  position: 'right'
}, {
  label: '标题优化',
  intro: '捕捉研究核心 展现论文价值',
  icon: require('@/assets/images/icon-07.png'),
  position: 'left'
}, {
  label: '摘要优化',
  intro: '提炼研究内容 展现研究成果',
  icon: require('@/assets/images/icon-08.png'),
  position: 'left'
}, {
  label: '论文降重',
  intro: '优化学术表达 降低查重风险',
  icon: require('@/assets/images/icon-09.png'),
  position: 'right'
}, {
  label: '更多功能',
  intro: '即将上线..',
  icon: require('@/assets/images/icon-10.png')
}]

</script>

<style lang="scss" scoped>
.home-main {
  width: 750px;
  min-height: 100vh;
  font-size: 18px;
  background: url('~@/assets/images/home-bg.png') no-repeat;
  background-size: 100%;

  .logo-wrap {
    padding-top: 43px;

    img {
      display: block;
    }

    .logo-img {
      width: 318px;
    }

    .title-logo-img {
      width: 243px;
      margin-top: 43px;
      margin-left: 58px;
    }

    .sub-title-logo-img {
      width: 458px;
      margin-top: 26px;
      margin-left: 53px;
    }
  }

  .content-wrap {
    width: 670px;
    margin: 0 auto;
    margin-top: 258px;

    .href-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 670px;
      height: 164px;
      margin: 0 auto;
      background: url('~@/assets/images/href-bg.png') no-repeat;
      background-size: 100% 100%;

      .href-text {
        font-size: 28px;
        font-weight: 500;
        line-height: 39.2px;
        color: #182B5A;
        margin-right: 25px;
      }

      .copy-wrap {
        width: 192px;
        height: 107px;
        line-height: 107px;
        text-align: center;
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 8px 9px 1px 0px #00000040;
        font-size: 32px;
        font-weight: 500;
        color: #025B68;
      }

      .point-img {
        position: absolute;
        right: 14px;
        bottom: -14px;
        height: 70px;
      }
    }

    .feedback-wrap {
      margin-top: 56px;

      :deep(.left-wrap) {
        width: 291px;
        background: url('~@/assets/images/item-header-01-long.png') no-repeat;
      }

      :deep(.right-wrap) {
        width: 357px;
      }
    }

    .feedback-img {
      height: 514px;
      background: url('~@/assets/images/feed-bg.png') no-repeat;
      background-size: 100% 100%;
    }

    .function-wrap {
      margin-top: 56px;

      .func-box {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        background: #63D4E4;
        border: 3px solid #182A59;
        padding: 40px 40px 16px 40px;
        border-radius: 20px;

        .func-item {
          position: relative;
          box-sizing: border-box;
          width: 280px;
          height: 196px;
          padding: 24px;
          border-radius: 20px;
          background: #B1F0F7;
          box-shadow: 0px 2px 16px 0px #21AEC266;
          color: #182B5A;
          margin-bottom: 24px;
          overflow: hidden;

          &:nth-child(odd) {
            margin-right: 24px;
          }

          .label {
            position: relative;
            display: inline-block;
            font-size: 32px;
            font-weight: 600;
            line-height: 44.8px;

            span {
              position: relative;
              z-index: 2;
            }

            .text-bg {
              position: absolute;
              bottom: 0;
              width: 63.5px;
              height: 12px;
              background: #81D68E;

              &.left {
                left: 0;
              }

              &.right {
                right: 0;
              }
            }
          }

          .intro {
            position: relative;
            z-index: 2;
            font-size: 22px;
            font-weight: 500;
            line-height: 33.6px;
            margin-top: 12px;
            color: #182B5A;
          }

          img {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 90px;
          }
        }

      }
    }

    .barcode-wrap {
      margin-top: 80px;
      padding-bottom: 56px;
      text-align: center;

      img {
        width: 200px;
      }

      p {
        margin-top: 24px;
        font-family: PingFang SC;
        font-size: 28px;
        font-weight: 500;
        line-height: 44px;
        text-align: center;
        color: #182B5A;
      }
    }
  }
}
</style>
